<template>
    <myx-table
               :tableAttr="tableAttr"
               :showSelection="true"
               :tableLoading="tableLoading"
               :showAddButton="false"
               :data="data"
               :column="column">
        <template #tableCell="{ scope }">
            <div v-if="scope.column.key == 'action'">
                <el-button type="primary" @click="addPermission(scope.row)">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    增加
                </el-button>
                <el-button type="primary"
                           @click="editPermission(scope.row)"
                           plain>
                    <el-icon>
                        <Edit></Edit>
                    </el-icon>
                    编辑
                </el-button>
                <el-button @click="del(scope.row.id)" type="danger" plain>
                    <el-icon>
                        <Delete></Delete>
                    </el-icon>
                    删除
                </el-button>
            </div>
        </template>
    </myx-table>
    <myx-dialog
                :reviewData="reviewData"
                :formData="formData"
                :formItems="formItems"
                :showUpload="false"
                :title="title"
                :action="action"
                @ok="handleOk"
                v-model="showDialog">
    </myx-dialog>
</template>
<script setup>
import { Edit, Delete, Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';
//表头样式
let tableHeaderStyle = { background: "var(--theme-bg)", color: '#fff', height: "60px", textAlign: 'center' }
//表格属性
let tableAttr = reactive(
    {
        border: true,
        height: 520,
        headerCellStyle: tableHeaderStyle,
        rowKey: (row) => row.id,
        expandRowKeys: []
    }
)


//表格数据
let data = ref([]);

let column = ref([
   
    {
        key: 'desc',
        dataIndex: 'desc',
        label: '权限描述',
        align: 'center',
   
    },
    {
        key: 'id',
        dataIndex: 'id',
        label: '权限编号',
        align: 'center',
        width:150
    },
    {
        key: 'path',
        dataIndex: 'path',
        label: '权限接口',
        align: 'center'
    },
    {
        key: 'method',
        dataIndex: 'method',
        label: '请求方式',
        align: 'center',
        width: 100
    },
    {
        key: 'permissions',
        dataIndex: 'permissions',
        label: '操作权限',
        align: 'center'
    },
    {
        key: 'action',
        label: "操作",
        tableCell: true
    }
])

//loading
let tableLoading = ref(false)
//获取所有的权限
let getAllPermissions = async () => {
    tableLoading.value = true
    try {
        let res = await api.getPermissionPathApi();
        // console.log(res)
        tableLoading.value = false
        data.value = res.permissionPaths
    } catch (e) {
        ElMessage.error(e.toString())
        tableLoading.value = false
    }
}


//控制dialog的属性

let title = ref('增加权限')
let action = ref('add')
let showDialog = ref(false)
//dialog弹窗的formItem
let formItems = [
    {
        key: 'desc',
        label: '权限描述',
        prop: 'desc',
        rules: [{ required: true, message: "请输入权限描述" }]
    },
    {
        key: 'method',
        label: '请求方式',
        prop: "method",
        rules: [{ required: true, message: "请输入请求方式" }]
    },
    {
        key: "path",
        label: '权限接口',
        prop: "path",
        rules: [{ required: true, message: "请输入权限接口" }]
    },
    {
        key: 'permissions',
        prop: 'permissions',
        label: "权限操作"
    },
    // {
    //     key: 'parentid',
    //     prop: 'parentid',
    //     label: "父级关联id"
    // }
]
//dialog表单数据对象
let formData = {
    desc: "",
    method: "",
    path: "",
    permissions: "any",
    parentid: ""
}

//增加权限的处理函数

let addPermission = row => {
    action.value = 'add'
    // console.log(row)
    //打开弹窗
    showDialog.value = true

    parentid.value = row.id
}

//回显数据

let reviewData = ref({});

let editPermission = row => {
    title.value = '编辑权限'
    action.value = 'edit'
    showDialog.value = true;
    reviewData.value = row;
}

//增加权限关联的父级id
let parentid = ref("")

//点击弹窗dialog确定按钮

let handleOk = async data => {
    // console.log(data)
    //做浅拷贝,避免影响原始data数据
    // console.log(data)
    let newData = { ...data, parentid: parentid.value }
    try {
        if (action.value == 'add') {
            console.log(newData)
            await api.addPermissionApi(newData)
            ElMessage.success('权限增加成功');
            //设置默认展开
            tableAttr.expandRowKeys.push(parentid.value)
        } else if (action.value == 'edit') {
            console.log(data)
            //编辑的时候不要传parentid
            let updateData = {
                // parentid:parentid.value,
                path: data.path,
                desc: data.desc,
                method: data.method,
                permissions: data.permissions,
                permissionId: data.id
            }
            await api.updatePermissionApi(updateData)
            ElMessage.success('权限修改成功');
        }
        getAllPermissions()
    } catch (e) {
        ElMessage.error(e.toString())
    }
}
//删除权限
let del = async id => {
    ElMessageBox.confirm("是否要删除这条权限", "删除提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    })
        .then(async () => {
            try {
                await api.deletePermissionApi({ permissionId:id })
                getAllPermissions()
                ElMessage.success('删除成功')
            } catch (e) {
                ElMessage.error(e.toString())
            }
        })
        .catch(e => {
            ElMessage.warning('已取消删除')
        })
}

onMounted(() => {
    getAllPermissions()
})
</script>
<script>
export default {
    name: 'config',
    meta: {
        name: "权限配置",
        icon: "icon-quanxianpeizhi1",

    }
}
</script>